<template>
	<view>
		<view class="column">
			<view class="column-item" v-for="(column,index) in columnList" :key="index">
			<view @click="handleColumnButton(column)">
			{{column.columnName}}
			</view>
			</view>
		</view>
		<view class="column-product">
			<view class="column-product-item" v-for="(product,index) in productList" :key="index" @click="handleProductButton(product)">
				<view class="column-product-item-fullname">{{product.productName}}</view>
				<view class="column-product-item-text layout">
					<view>
						<view>1.56%</view>
						<view>七日年华收益率</view>
					</view>
					<view>
						<view>每日申赎 开放式产品</view>
						<view>1元起购 | 一级（极低风险）</view>
					</view>
				</view>
				<view class="column-product-item-tooltip">本产品由三竹投资油脂产业有限公司提供</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				columnList:[
					{
						columnName:"进行中"
					},
					{
						columnName:"正在预售"
					},
					{
						columnName:"油脂油料"
					},
					{
						columnName:"农产品"
					},
					{
						columnName:"有色金属"
					}
				],
				productList:[
					{
						productIcon:"/static/logo.png",
						productName:"菜油2501期",
						productID:1010,
					},
					{
						productIcon:"/static/logo.png",
						productName:"棕榈油2501期",
						productID:1010,
					},
					{
						productIcon:"/static/logo.png",
						productName:"豆油2501期",
						productID:1010,
					},
					{
						productIcon:"/static/logo.png",
						productName:"沪铝2501期",
						productID:1010,
					}
				],
				filterForm:{
					
				}
				
			}
		},
		onLoad() {
			//this.refreshCatalogList()
			this.productList = [];
			//this.columnList = [];
		},
		onShow() {
			this.refreshCatalogList();
		},
		methods: {
			refreshCatalogList:function(){
				this.$fund.getCatalogList().then(res=>{
					console.log(res)
					if(res.code == 200){
						this.columnList = res.data.list;
					}
				})
			},
			refreshProductList:function(){
				this.$fund.getProductList(this.filterForm).then(res=>{
					console.log(res)
					if(res.code == 200){
						this.productList = res.data.list;
					}
				})
			},
			handleColumnButton:function(catalog){
				this.filterForm.columnID = catalog.ID
				this.refreshProductList()
			},
			handleProductButton:function(product){
				uni.redirectTo({
					url:"/pages/fund/detail/detail?fromType=column&productID="+product.ID
				})
			},
			
		}
	}
</script>

<style>
page { background: #ededed; }
.column { position: fixed; left: 0; top: 0; bottom: 0;  background: #fff; }
.column-item { padding: 15rpx; }
.column-product { position: fixed; top: 0; left: 200rpx; right: 15rpx; bottom: 0; }

.column-product-item { border-radius: 15rpx; background: #fff; padding: 15rpx; margin-bottom: 25rpx; }
.column-product-item-fullname { font-size: 16px; font-weight: bold; padding: 15rpx 0; }
.column-product-item-text { font-size: 14px;}
.column-product-item-tooltip { font-size: 12px; padding: 15rpx 0; }
</style>
